<template>
  <div class="banner">
    <el-col :span="24" class="action-bar">
      <!-- <span style="color:#888888;">轮播图管理:</span> -->
      <el-button type="primary" size="medium" @click="addBtnReset" style="margin: 0 20px;">新增</el-button>
    </el-col>

    <!--列表-->
    <el-table :data="membersList" highlight-current-row class="el-table-style">
      <el-table-column type="index" min-width="60">
      </el-table-column>
      <el-table-column prop="realname" label="姓名/昵称" min-width="60">
      </el-table-column>
      <el-table-column prop="phone" label="手机" min-width="60">
      </el-table-column>
      <el-table-column prop="created_at" label="绑定时间" min-width="60">
      </el-table-column>
      <el-table-column prop="sort" label="排序" min-width="100" sortable>
      </el-table-column>
      <el-table-column label="操作" min-width="150">
        <template slot-scope="scope">
<!--          <el-button type="primary" class="danger-btn" size="mini" @click="getGroupMemberDetail(scope.row.id)">详情</el-button>-->
          <el-button type="danger" class="danger-btn" size="mini" @click="delGroupMember(scope.row.id)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
    <el-col :span="24" class="footer-bar">
      <!-- <div class="batch"><el-button size="medium ">批量删除</el-button></div> -->
      <div class="page-code">
        <el-pagination
          background
          layout="prev, pager, next"
          :total="pageTotal"
          :page-size="limit"
          @current-change="getGroupMemberList"
        >
        </el-pagination>
      </div>
    </el-col>

    <!-- 新增 -->
    <el-dialog title="新增成员" :visible.sync="addFormVisible" width="40%">
      <div style="min-width:calc(100% - 160px);max-width:calc(100% - 300px);display: block;float: left">
        <el-col :span="22">
          <el-input v-model="searchText" placeholder="用户昵称或手机号"></el-input>
        </el-col>
      </div>
      <div style="min-width: 160px;max-width: 300px;display: block;float: left">
        <el-button type="primary" @click="getUserList()">搜索</el-button>
        <el-button type="primary" @click="addSubmitBtn">添加</el-button>
      </div>
      <div slot="footer" class="dialog-footer">
        <el-table :data="userList"
                  ref="multipleTable"
                  @selection-change="handleSelectionChange"
                  :row-key="getRowKey"
                  height="300"
                  highlight-current-row
                  style="min-width:calc(100% - 160px);max-width:100%"
                  class="el-table-style-a">
          <el-table-column type="selection" prop="id" :reserve-selection="true"></el-table-column>
          <el-table-column label="姓名/昵称">
            <template slot-scope="scope">
              <p>{{scope.row.user_info.realname==null?scope.row.user_info.nickname:scope.row.user_info.realname}}</p>
            </template>
          </el-table-column>
          <el-table-column prop="phone" label="手机"></el-table-column>
        </el-table>
          <!-- <div class="batch"><el-button size="medium ">批量删除</el-button></div> -->
          <div class="footer-bar-a page-code" style="min-width:calc(100% - 160px);max-width:100%">
            <el-pagination
              background
              layout="prev, pager, next"
              :total="userTotal"
              :page-size="userLimit"
              :current-page="userPage"
              @current-change="getUserList"
            >
            </el-pagination>
          </div>
      </div>
    </el-dialog>

    <!-- 详情 -->
    <el-dialog title="成员详情" :visible.sync="detailFormVisible" width="40%">
      <el-form :label-position="'left'" label-width="150px">
<!--        <el-form-item label="logo">-->
<!--          <div><img :src="cousultationDetail.logo_url" alt=""-->
<!--                    style="width:60px;border-radius:50%;height:60px;object-fit:cover"></div>-->
<!--        </el-form-item>-->
<!--        <el-form-item label="单位名称">-->
<!--          <div>{{cousultationDetail.name}}</div>-->
<!--        </el-form-item>-->
<!--        <el-form-item label="联系方式">-->
<!--          <div>{{cousultationDetail.contact_number}}</div>-->
<!--        </el-form-item>-->
<!--        <el-form-item label="单位地址">-->
<!--          <div>-->
<!--            {{cousultationDetail.province}}{{cousultationDetail.city}}{{cousultationDetail.area}}{{cousultationDetail.address}}-->
<!--          </div>-->
<!--        </el-form-item>-->

<!--        <el-form-item label="业务范围">-->
<!--          <div class="tag-wrapper">-->
<!--            <span v-for="(item,index) of cousultationDetail.unit_business_label" :key="index">{{item}}</span>-->
<!--          </div>-->
<!--        </el-form-item>-->
<!--        <el-form-item label="单位简介">-->
<!--          <div class="rich-text" v-html="cousultationDetail.introduction"></div>-->
<!--        </el-form-item>-->
<!--        &lt;!&ndash; <el-form-item label="法定代表人" >-->
<!--            <div>{{cousultationDetail.legal_person_name}}</div>-->
<!--        </el-form-item> &ndash;&gt;-->
<!--        <el-form-item label="营业执照">-->
<!--          <div>-->
<!--            <el-image-->
<!--              style="width: 200px; height: 200px"-->
<!--              :fit="'contain'"-->
<!--              :src="cousultationDetail.license_img_url"-->
<!--              :preview-src-list="[cousultationDetail.license_img_url]">-->
<!--            </el-image>-->

<!--          </div>-->
<!--        </el-form-item>-->
<!--        <el-form-item label="统一社会信用代码">-->
<!--          <div>{{cousultationDetail.uniform_social_credit_code}}</div>-->
<!--        </el-form-item>-->
<!--        <el-form-item label="创建时间">-->
<!--          <div>{{cousultationDetail.created_at}}</div>-->
<!--        </el-form-item>-->
<!--        <el-form-item label="单位级别">-->
<!--          <div>{{cousultationDetail.unit_grade_name}}</div>-->
<!--        </el-form-item>-->
<!--        <el-form-item label="单位分类">-->
<!--          <div>{{cousultationDetail.classify_name}}</div>-->
<!--        </el-form-item>-->
      </el-form>
    </el-dialog>
  </div>
</template>

<script>
    export default {
      name: "group_members",
      data(){
        return{
          addFormVisible: false, //添加弹窗
          detailFormVisible: false, //详情弹窗
          membersList:[],
          pageTotal:0,
          limit: 10,

          membersDetail: {},

          searchText:'',
          userList:[],
          userTotal: 0,
          userLimit: 10,
          userPage: 1,

          group_id:'',
          user_id:[],
          changeUser: []

        }
      },
      mounted() {
        this.group_id = this.$route.query.id
        this.getGroupMemberList();
      },
      methods:{
        //获取组员列表
        async getGroupMemberList(page){
          let params = {
            page: page||1,
            limit: this.limit,
            group_id: this.group_id
          }
          const res = await this.$api.getGroupMemberList(params);
          if (res.data.level == 'success'){
            this.membersList = res.data.data;
            this.pageTotal = res.data.page_info.total;
          }else {
            this.$message({
              message: res.data.message,
              type: 'warning'
            });
          }
        },
        //获取组员详情
        async getGroupMemberDetail(id){
          const res = await this.$api.getGroupMemberDetail({id:id});
          if (res.data.level == 'success'){
            this.membersDetail = res.data.data;
            this.detailFormVisible = true
          }else {
            this.$message({
              message: res.data.message,
              type: 'warning'
            });
          }
        },
        //获取用户列表
        async getUserList(page){
          this.userPage = page||1;
          let params = {
            page: this.userPage,
            limit: this.userLimit,
            keyword: this.searchText,
            group_id: this.group_id
          }
          const res = await this.$api.getNotJoinGroupUserList(params);
          if (res.data.level == 'success'){
            this.userList = [];
            this.userList = res.data.data;
            this.userTotal = res.data.page_info.total;
            if (!page){
              let str = this.changeUser;
              for (let i = 0; i < Math.ceil(this.userTotal/this.limit); i++){
                str[i] = [];
              }
              this.changeUser = str;
            }
            this.toggleSelection(this.changeUser[this.userPage-1])
          }else {
            this.$message({
              message: res.data.message,
              type: 'warning'
            });
          }
        },
        //删除组员
        async delGroupMember(id){
          let params = {
            id: id
          }
          const res = await this.$api.delGroupMember(params);
          if (res.data.level == 'success'){
            this.$message({
              message: res.data.message,
              type: 'success'
            });
            this.getGroupMemberList();
          } else {
            this.$message({
              message: res.data.message,
              type: 'warning'
            });
          }
        },
        //新增按钮重置表单
        addBtnReset(){
          this.addFormVisible = true;
          // this.user_id = [];
          this.user_id = [];
          this.changeUser = [];
          this.userPage = 1;
          this.getUserList();
        },
        //新增取消按钮
        addCancelBtn(){
          this.user_id = [];
          this.changeUser = [];
          this.userPage = 1;
          this.addFormVisible = false;
        },
        //新增按钮
        async addSubmitBtn(){
          for (let i = 0; i< this.changeUser.length ; i++){
            for (let n = 0; n< this.changeUser[i].length; n++){
              this.user_id.push(this.changeUser[i][n].user_info.user_id);
            }
          }
          console.log(this.user_id)
          let params = {
            group_id : this.group_id,
            user_id : this.user_id
          }
          const res = await this.$api.setGroupMember(params);
          if (res.data.level == 'success'){
            this.$message({
              message: res.data.message,
              type: 'success'
            });
            this.addCancelBtn();
            this.getGroupMemberList();
          }else {
            this.$message({
              message: res.data.message,
              type: 'warning'
            });
          }
        },
        handleSelectionChange(e){
          this.changeUser[this.userPage-1] = e;
        },
        getRowKey(row){
          return row.id;
        },
        toggleSelection (rows) {
          if (rows) {
            rows.forEach(row => {
              this.$refs.multipleTable.toggleRowSelection(row);
            });
          } else {
            console.log('aaa')
            this.$refs.multipleTable.clearSelection();
          }
        },
      }
    }
</script>

<style lang='scss' scoped>
  .banner{
    .action-bar{
      background-color: #f2f2f2;
      height: 60px;
      margin: 10px 0px;
      box-sizing: border-box;
      display: flex;
      align-items: center;
      padding-left: 20px;
      .action-bar-input{
        width: 250px;
        margin-right: 14px;
      }
    }
    .el-table-style{
      width: 100%;
      border: 1px solid #f2f2f2;
    }
    .el-table-style-a{
      /*width: 70%;*/
      border: 1px solid #f2f2f2;
    }
    .footer-bar{
      display: flex;
      justify-content: space-between;
      align-items: center;
      background: #f2f2f2;
      padding: 8px;
      margin: 10px 0px;
      box-sizing: border-box;
    }
    .footer-bar-a{
      display: flex;
      justify-content: space-between;
      align-items: center;
      background: #f2f2f2;
      padding: 8px;
      box-sizing: border-box;
      width: 70%;
    }
    .dialog-footer{
      clear: both;
      padding: 20px 0;
      text-align: center;
    }
  }
</style>

<style>
  .el-pagination.is-background .el-pager li,
  .el-pagination.is-background .btn-prev,
  .el-pagination.is-background .btn-next
  {
    background-color: #fff;
    border: 1px solid #f1f1f1;
    margin: 0;
  }
  .member .el-dialog__body{overflow: auto;}
  .avatar-uploader .el-upload {
    border: 1px dashed #d9d9d9;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
  }
  .avatar-uploader .el-upload:hover {
    border-color: #409EFF;
  }
  .avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 178px;
    height: 178px;
    line-height: 178px;
    text-align: center;
  }
  .avatar {
    width: 178px;
    height: 178px;
    display: block;
  }
</style>
